<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2015/3/26
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.min.js"></script>--%>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/bootstrap.css">--%>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/bootstrap.js"></script>--%>
    <%--&lt;%&ndash;<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">&ndash;%&gt;--%>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">



    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <h4 class="page-header">
        <button style="float: right" type="button" class="btn btn-block" aria-label="Left Align" data-toggle="modal" data-target="#exampleModal" data-title="新建知识库" data-url="<%=request.getContextPath() %>/admin/knowledgeAdd">
            <span style="float: right" class="glyphicon glyphicon-plus"  aria-hidden="true"></span>
        </button>
    </h4>
    <table class="table table-hover table-condensed">
        <tr>

            <th>问题</th>
            <th>操作</th>
        </tr>
       <c:forEach items="${knowledgeList.datas}" var="knowledge">
        <tr>
            <td>${knowledge.question}</td>
            <td>
                <%--<button type="button" class="btn btn-default" aria-label="Left Align" data-toggle="collapse" href="#${knowledge.id}" aria-expanded="false" aria-controls="${knowledge.id}">--%>
                 <button class="btn btn-default " aria-label="Left Align" data-toggle="collapse"  type="button" data-toggle="collapse" data-target="#${knowledge.id}" aria-expanded="true" aria-controls="${knowledge.id}">
                    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-default" aria-label="Left Align" data-toggle="modal" data-target="#exampleModal" data-title="修改知识库" data-url="<%=request.getContextPath() %>/admin/knowledgeUpdate" data-id="${knowledge.id}" data-question="${knowledge.question}" data-answer="${knowledge.answer}">
                    <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                </button>
                 <a href="<%=request.getContextPath() %>/admin/knowledgeDelete/${knowledge.id}">
                 <button type="button" class="btn btn-default" aria-label="Left Align">
                     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                 </button>
                 </a>

            </td>
        </tr>
        <tr>
            <td colspan="2">
                   <div class="collapse" id="${knowledge.id}">
                       <div class="well">
                          <ul>
                              <c:forEach items="${knowledge.answerSet}" var="answer">
                              <li> ${answer.answer}</li>
                              </c:forEach>
                              <c:if test="${knowledge.answer ne null}">
                              <li>
                                  ${knowledge.answer}
                              </li>
                              </c:if>
                          </ul>
                       </div>
                   </div>
            </td>
        </tr>
        </c:forEach>
        <tr>
            <td colspan="2">
                <jsp:include page="/jsp/public/pager.jsp">
                    <jsp:param value="${knowledgeList.total }" name="totalRecord"/>
                    <jsp:param value="knowledgeList" name="url"/>
                </jsp:include>
            </td>
        </tr>
    </table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Edit</h4>
            </div>
            <form method="post" id="form" action="<%=request.getContextPath() %>/admin/knowledgeUpdate">
            <div class="modal-body">

                    <input type="hidden" id="knowledgeId" name="knowledgeId" value="">
                    <div class="form-group">
                        <label for="question" class="control-label">问题:</label>
                        <input type="text" class="form-control" id="question" name="question">
                    </div>
                    <div class="form-group">
                        <label for="answer" class="control-label">答案:</label>
                        <textarea rows="5" class="form-control" id="answer" name="answer"></textarea>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id = button.data('id'); // Extract info from data-* attributes
        var question=button.data('question');
        var answer=button.data('answer');
        var title=button.data('title');
        var url=button.data('url');
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this);
        modal.find('.modal-title').text(title);
        modal.find('#knowledgeId').val(id);
        modal.find('#question').val(question);
        modal.find('#answer').val(answer);
        modal.find('#form').attr("action", url)
    })
</script>